<template>
  <div class="add-card">
    <header class="add-header">
      <el-page-header content="增加月卡" @back="$router.back()" />
    </header>
    <main class="add-main">
      <div class="form-container">
        <div class="title">车辆信息</div>
        <div class="form">
          <el-form ref="formRef1" :rules="rules1" :model="formData1" label-width="100px">
            <el-form-item prop="personName" label="车主姓名">
              <el-input v-model="formData1.personName" />
            </el-form-item>
            <el-form-item prop="phoneNumber" label="联系方式">
              <el-input v-model="formData1.phoneNumber" />
            </el-form-item>
            <el-form-item prop="carNumber" label="车辆号码">
              <el-input v-model="formData1.carNumber" />
            </el-form-item>
            <el-form-item prop="carBrand" label="车辆品牌">
              <el-input v-model="formData1.carBrand" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="form-container">
        <div class="title">最新一次月卡缴费信息</div>
        <div class="form">
          <el-form ref="formRef2" label-width="100px" :model="formData2" :rules="rules2">
            <el-form-item label="有效日期" prop="payTime">
              <el-date-picker
                v-model="formData2.payTime"
                style="width: 400px"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item prop="paymentAmount" label="支付金额">
              <el-input v-model="formData2.paymentAmount" />
            </el-form-item>
            <el-form-item prop="paymentMethod" label="支付方式">
              <el-select v-model="formData2.paymentMethod">
                <el-option
                  v-for="item in paymentMethodList"
                  :key="item.industryCode"
                  :value="item.industryCode"
                  :label="item.industryName"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </main>
    <footer class="add-footer">
      <div class="btn-container">
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="submitList">确定</el-button>
      </div>
    </footer>
  </div>
</template>

<script>
import { addCardAPI, editCardAPI, editCardSubmitAPI } from '@/api/car'

export default {
  data() {
    return {
      formData1: {
        personName: '',
        phoneNumber: '',
        carNumber: '',
        carBrand: ''
      },
      formData2: {
        payTime: '',
        paymentAmount: '',
        paymentMethod: ''
      },
      rules1: {
        personName: [
          { required: true, message: '请输入车主姓名', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        carNumber: [
          { required: true, message: '请输入车辆号码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              const carNumberReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
              if (!carNumberReg.test(value)) {
                callback(new Error('请输入正确的车牌号'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        carBrand: [
          { required: true, message: '请输入车辆品牌', trigger: 'blur' }
        ]
      },
      rules2: {
        paymentAmount: [
          { required: true, message: '请输入支付金额', trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: '请选择支付方式', trigger: 'change' }
        ],
        payTime: [
          { required: true, message: '请选择有效日期' }
        ]
      },
      paymentMethodList: [
        {
          industryCode: 'Alipay',
          industryName: '支付宝'
        },
        {
          industryCode: 'WeChat',
          industryName: '微信'
        },
        {
          industryCode: 'Cash',
          industryName: '线下'
        }
      ]
    }
  },
  created() {
    this.getCardDetail()
  },
  methods: {
    // 获取表单数据
    async getCardDetail() {
      if (this.$route.params.id) {
        const { data } = await editCardAPI(this.$route.params.id)
        // console.log(data)
        const { personName, phoneNumber, carNumber, carBrand, carInfoId } = data
        this.formData1 = {
          personName,
          phoneNumber,
          carNumber,
          carBrand,
          carInfoId
        }
        const { paymentAmount, paymentMethod, rechargeId, cardEndDate, cardStartDate } = data.rechargeList[0]
        this.formData2 = {
          paymentAmount,
          paymentMethod,
          rechargeId,
          payTime: [cardStartDate, cardEndDate]
        }
      }
    },
    // 确认按钮
    async submitList() {
      await this.$refs.formRef1.validate()
      await this.$refs.formRef2.validate()
      const params = {
        ...this.formData1,
        ...this.formData2,
        cardStartDate: this.formData2.payTime[0],
        cardEndDate: this.formData2.payTime[1]
      }
      delete params.payTime
      // 发送请求 判断是否有id
      if (this.$route.params.id) {
        await editCardSubmitAPI(params)
        this.$message.success('编辑月卡成功')
      } else {
        await addCardAPI(params)
        this.$message.success('增加月卡成功')
      }
      this.$router.back()
    },
    // 重置按钮
    resetForm() {
      this.$refs.formRef1.resetFields()
      this.$refs.formRef2.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.add-card {
    background-color: #f4f6f8;
    height: 100vh;

    .add-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .add-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }

        .preview {
            img {
                width: 100px;
            }
        }
    }

    .add-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 24px 50px;
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        text-align: center;
    }
}
</style>
